<template>
  <div>
    <!-- 头部 -->
    <header>
      <div>
        <span @click="Return" class="jiantou"></span>
        <p>我的</p>
      </div>
    </header>
    <main>
      <div class="login" @click="enroll">
        <img class="img" :src="imgSrc" alt="" />
        <div class="login-small">
          <div class="login-left">
            <p class="zhuce">{{ username }}</p>
            <p>暂无绑定手机号</p>
          </div>
          <div class="login-right">
            <span class="jianttou"></span>
          </div>
        </div>
      </div>
      <!-- 数据部分 -->
      <div class="data">
        <!-- 数据小盒子 -->
        <div class="data-small">
          <p><span class="ff90">0.00</span>元</p>
          我的余额
        </div>
        <!-- 数据小盒子 -->
        <div class="data-small">
          <p><span class="ff5f3e">0</span>个</p>
          我的优惠
        </div>
        <!-- 数据小盒子 -->
        <div class="data-small">
          <p><span class="green">0</span>分</p>
          我的积分
        </div>
      </div>
      <div class="separatrix"></div>
      <p class="hang">
        <span>我的订单</span>
        <svg
          t="1631526667316"
          class="jianttouu"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2159"
          width="200"
          height="200"
        >
          <path
            d="M346.52382345477406 104.43830532674417c-12.257495055447652-12.257495055447652-30.6437359627898-12.257495055447652-42.90123101823747 0s-12.257495055447652 30.6437359627898 0 42.90123101823747L668.2830560915551 512 303.6225924365366 876.6604636550185c-12.257495055447652 12.257495055447652-12.257495055447652 30.6437359627898 0 42.90123101823747 6.128747527723826 6.128747527723826 15.3218679813949 9.193120453671073 21.450615509118734 9.193120453671073s15.3218679813949-3.064372925947246 21.450615509118734-9.193120453671073l386.1110791641372-386.1110791641372c12.257495055447652-12.257495055447652 12.257495055447652-30.6437359627898 0-42.90123101823747L346.52382345477406 104.43830532674417z"
            fill="#cdcdcd"
            p-id="2160"
          ></path>
        </svg>
      </p>
      <p class="hang">
        <span>积分商城</span>
        <svg
          t="1631526667316"
          class="jianttouu"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2159"
          width="200"
          height="200"
        >
          <path
            d="M346.52382345477406 104.43830532674417c-12.257495055447652-12.257495055447652-30.6437359627898-12.257495055447652-42.90123101823747 0s-12.257495055447652 30.6437359627898 0 42.90123101823747L668.2830560915551 512 303.6225924365366 876.6604636550185c-12.257495055447652 12.257495055447652-12.257495055447652 30.6437359627898 0 42.90123101823747 6.128747527723826 6.128747527723826 15.3218679813949 9.193120453671073 21.450615509118734 9.193120453671073s15.3218679813949-3.064372925947246 21.450615509118734-9.193120453671073l386.1110791641372-386.1110791641372c12.257495055447652-12.257495055447652 12.257495055447652-30.6437359627898 0-42.90123101823747L346.52382345477406 104.43830532674417z"
            fill="#cdcdcd"
            p-id="2160"
          ></path>
        </svg>
      </p>
      <p class="hang">
        <span>饿了么会员卡</span>
        <svg
          t="1631526667316"
          class="jianttouu"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2159"
          width="200"
          height="200"
        >
          <path
            d="M346.52382345477406 104.43830532674417c-12.257495055447652-12.257495055447652-30.6437359627898-12.257495055447652-42.90123101823747 0s-12.257495055447652 30.6437359627898 0 42.90123101823747L668.2830560915551 512 303.6225924365366 876.6604636550185c-12.257495055447652 12.257495055447652-12.257495055447652 30.6437359627898 0 42.90123101823747 6.128747527723826 6.128747527723826 15.3218679813949 9.193120453671073 21.450615509118734 9.193120453671073s15.3218679813949-3.064372925947246 21.450615509118734-9.193120453671073l386.1110791641372-386.1110791641372c12.257495055447652-12.257495055447652 12.257495055447652-30.6437359627898 0-42.90123101823747L346.52382345477406 104.43830532674417z"
            fill="#cdcdcd"
            p-id="2160"
          ></path>
        </svg>
      </p>
      <div class="separatrix"></div>
      <p class="hang">
        <span>服务中心</span>
        <svg
          t="1631526667316"
          class="jianttouu"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2159"
          width="200"
          height="200"
        >
          <path
            d="M346.52382345477406 104.43830532674417c-12.257495055447652-12.257495055447652-30.6437359627898-12.257495055447652-42.90123101823747 0s-12.257495055447652 30.6437359627898 0 42.90123101823747L668.2830560915551 512 303.6225924365366 876.6604636550185c-12.257495055447652 12.257495055447652-12.257495055447652 30.6437359627898 0 42.90123101823747 6.128747527723826 6.128747527723826 15.3218679813949 9.193120453671073 21.450615509118734 9.193120453671073s15.3218679813949-3.064372925947246 21.450615509118734-9.193120453671073l386.1110791641372-386.1110791641372c12.257495055447652-12.257495055447652 12.257495055447652-30.6437359627898 0-42.90123101823747L346.52382345477406 104.43830532674417z"
            fill="#cdcdcd"
            p-id="2160"
          ></path>
        </svg>
      </p>
      <p class="hang">
        <span>下载饿了么</span>
        <svg
          t="1631526667316"
          class="jianttouu"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2159"
          width="200"
          height="200"
        >
          <path
            d="M346.52382345477406 104.43830532674417c-12.257495055447652-12.257495055447652-30.6437359627898-12.257495055447652-42.90123101823747 0s-12.257495055447652 30.6437359627898 0 42.90123101823747L668.2830560915551 512 303.6225924365366 876.6604636550185c-12.257495055447652 12.257495055447652-12.257495055447652 30.6437359627898 0 42.90123101823747 6.128747527723826 6.128747527723826 15.3218679813949 9.193120453671073 21.450615509118734 9.193120453671073s15.3218679813949-3.064372925947246 21.450615509118734-9.193120453671073l386.1110791641372-386.1110791641372c12.257495055447652-12.257495055447652 12.257495055447652-30.6437359627898 0-42.90123101823747L346.52382345477406 104.43830532674417z"
            fill="#cdcdcd"
            p-id="2160"
          ></path>
        </svg>
      </p>
    </main>
  </div>
</template>
<style >
.img {
  width: 8rem;
  border-radius: 50%;
  height: 8rem;
}
.hang {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 7rem;
  line-height: 7rem;
  padding: 0 0.4rem;
  box-sizing: border-box;
}
.hang span {
  font-size: 0.32rem;
}
.jianttouu {
  width: 3rem;
  height: 3rem;
}
.separatrix {
  height: 4rem;
  width: 100%;
  background-color: #f5f5f5;
}
.green {
  color: #6ac20b;
}
.ff5f3e {
  color: #ff5f3e;
}
.ff90 {
  color: #f90;
}
.data-small span {
  font-size: 0.5rem;
  font-weight: 700;
}
.data-small {
  width: 33%;
  line-height: 2rem;
  height: 100%;
  padding: 1rem;
  border-right: 1px solid #f1f1f1;
  color: #666;
  box-sizing: border-box;
  text-align: center;
  justify-content: space-between;
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 4rem 0;
}
.data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 14rem;
}
.jianttou {
  width: 3rem;
  height: 3rem;
  fill: #fff;
  border: 1px solid #fff;
  border-width: 0.02rem 0.02rem 0px 0px;
  transform: rotateZ(45deg);
}
.zhuce {
  font-weight: 700;
  font-size: 0.4rem;
}
.login-small {
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-right {
  display: flex;
}
.login-left {
  color: #fff;
}
.icon {
  width: 9.4rem;
  height: 9.4rem;
}
* {
  margin: 0;
  padding: 0;
  font-size: 0.3rem;
}
header {
  position: fixed;
  z-index: 1990;
  top: 0;
  left: 0;
  width: 100%;
  height: 10rem;
  background-color: #3190e8;
}
header div {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 60%;
  height: 100%;
  color: #fff;
  box-sizing: border-box;
  font-weight: 700;
}
.jiantou {
  width: 3rem;
  height: 3rem;
  fill: #fff;
  border: 1px solid #fff;
  border-width: 0.06rem 0.06rem 0px 0px;
  transform: rotateZ(225deg);
}
main {
  margin-top: 10rem;
}
.login {
  width: 100%;
  height: 9rem;
  display: flex;
  padding: 0.2rem 2rem;
  box-sizing: border-box;
  background: #3190e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
<script>
export default {
  data() {
    return { username: "登录/注册", imgSrc: "" };
  },
  methods: {
    /* 返回 */
    Return() {
      this.$router.go(-1);
    },
    /* 页面跳转 */
    enroll() {
      this.$router.push("/Oneself");
    },
  },
  mounted() {
    if (localStorage.username != "") {
      this.username = localStorage.username;
    }
    if (localStorage.imgSrc) {
      this.imgSrc = localStorage.imgSrc;
    } else {
      this.imgSrc = localStorage.imgSrc;
    }
  },
};
</script>
